<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Windoo usage template</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css" media="all">
	/* include common CSS file */
    @import url(themes/windoo.css);

	/* include theme-specific CSS files */
    @import url(themes/windoo.aero.css);
    @import url(themes/windoo.alphacube.css);
    @import url(themes/windoo.aqua.css);

    body {
    	background:#fff;
    }

	/* custom CSS code */
	#win2 {
		width:300px;
		height:150px;
		border:solid red 1px;
		margin:3em 0 0 2em;
		padding:.5em;
		overflow:hidden;
    	font-size:12px;
	}
	#win2 p {
		margin:0;
		padding:0;
	}
</style>

<!--  !!! Include IE-only CSS for Windoo Aqua theme !!! -->
<!--[if IE]><link rel="stylesheet" type="text/css" href="themes/windoo.aqua.ie.css" media="screen,handheld" /><!{endif]-->

<!--  Include javascript libraries  -->
<script type="text/javascript" src="js/mootools-release-1.11.js"></script>
<script type="text/javascript" src="js/windoo.r114.js"></script>
<script type="text/javascript">//<![CDATA[

//** Create windows on page load
window.addEvent('domready', function(){

	//** Window 1: positioned window with content adopted from existing DOM element
	var win1 = $('win1'), container1 = win1.getParent();
	win1.remove();

	var panel = new Element('div', {'styles': {'padding-top': 10, 'text-align': 'right'}}).adopt(
		new Element('input', {'type': 'button', 'value': '<< Back'}),
		new Element('input', {'type': 'button', 'value': 'Forward >>'})
	);
	var windoo1 = new Windoo({
		left: 200,
		top: 150,
		title: 'Window with buttons panel',
		//positionStyle: 'fixed', // NOTE: not functional if container defined
		container: container1,
		resizeLimit: {'x':[270], 'y':[200]},
		theme: Windoo.Themes.aqua,
		position: false
	})/*.addPanel(panel)*/.adopt(win1).show();

	$('alert-dialog').addEvent('click', function(ev){
		//** display Alert dialog window
		new Windoo.Alert("<p><strong>Welcome to Windoo</strong>:<br/>a Mootools extension for creating inline windows</p>", {
			'window': {'theme': Windoo.Themes.aqua}
		});
	});
});

//]]></script>
</head>
<body>

<h1>Windoo: Mootools window class</h1>
<blockquote>
	<p>Aqua theme demonstration for Windoo.</p>
	<p>Visit <a href="http://code.google.com/p/windoo/">project home page</a>.</p>
</blockquote>

<p>
	<input id="alert-dialog" title="Create inline modal alert dialog window" value="Display Windoo.Alert" type="button" />
</p>

<h2>Known issues:</h2>
<ul>
<li>window shadow should be hidden when window is maximized to prevent window overlapping with scrollbars</li>
<li>top corner rendering with black background while fading in Opera 9.2</li>
<li>overlapping shadow in IE6 (<a href="http://www.quirksmode.org/bugreports/archives/2006/02/Incorrect_positions_when_using_right_and_bottom.html">bug description</a>)</li>
</ul>


<!-- Window 1 content -->
<div id="win1">
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec fermentum erat nec felis. Cras suscipit enim sit amet velit. Suspendisse commodo ultricies quam. Nulla elementum tristique risus. Ut ultrices lorem et nisi. Mauris eget felis eu lacus ornare viverra. Aliquam non nulla. Suspendisse potenti. Integer congue. Curabitur placerat pharetra nulla. Nam tristique laoreet libero. Suspendisse neque. Pellentesque posuere ullamcorper enim. In hac habitasse platea dictumst. Nam nonummy consequat ligula. Maecenas commodo lacus ut purus. Etiam rutrum velit nec tellus. Praesent sit amet urna in odio pulvinar gravida. Integer pede. Sed orci.</p>
	<p>Nulla turpis leo, dictum vitae, auctor posuere, molestie eu, nisi. Donec urna erat, auctor ac, sodales non, auctor ut, nunc. Phasellus ac purus. Ut porta. Curabitur neque augue, dictum id, ultrices imperdiet, fermentum nec, nulla. Maecenas tempor, dolor ut ultricies congue, diam purus gravida eros, sit amet cursus dolor diam ut justo. Nullam ut nisl eget erat ultrices imperdiet. Sed convallis. Phasellus viverra. Integer mi mauris, pharetra vitae, tincidunt eu, imperdiet at, lectus. Sed consequat, ante in mollis adipiscing, arcu lectus euismod orci, ut viverra diam diam eget dolor. Suspendisse urna. Ut vitae magna in arcu dignissim consectetuer. Praesent laoreet. Sed at enim. Mauris elit velit, consequat vel, hendrerit at, dictum nec, metus. Aliquam pharetra. Mauris aliquam pulvinar metus. Curabitur luctus tellus quis neque. Fusce interdum tortor sit amet sapien consequat porta.</p>
</div>

<!-- Window 2 content -->
<div id="win2">
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec fermentum erat nec felis. Cras suscipit enim sit amet velit. Suspendisse commodo ultricies quam. Nulla elementum tristique risus. Ut ultrices lorem et nisi. Mauris eget felis eu lacus ornare viverra. Aliquam non nulla. Suspendisse potenti. Integer congue. Curabitur placerat pharetra nulla. Nam tristique laoreet libero.</p>
</div>

</body>
</html>